<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="search-card">
          <div class="df aic">
            <img src="../assets/ProjectImages/index/icon_3.png" class="icon" alt="" />
            <div class="ml_20">
              <div>今日交费人数</div>
              <div class="mt_10 fs">100</div>
            </div>
          </div>
          <div class="">
            <div class="dfs">新生：0</div>
            <div class="dfs">老生：1</div>
            <div class="dfs">自主：0</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="search-card">
          <div class="df aic">
            <img src="../assets/ProjectImages/index/icon_2.png" class="icon" alt="" />
            <div class="ml_20">
              <div>今日收费金额</div>
              <div class="mt_10 fs">100</div>
            </div>
          </div>
          <div class="">
            <div class="dfs">新生：0</div>
            <div class="dfs">老生：1</div>
            <div class="dfs">自主：0</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="search-card">
          <div class="df aic">
            <img src="../assets/ProjectImages/index/icon_1.png" class="icon" alt="" />
            <div class="ml_20">
              <div>累计缴费人数</div>
              <div class="mt_10 fs">100</div>
            </div>
          </div>
          <div class="">
            <div class="dfs">新生：0</div>
            <div class="dfs">老生：1</div>
            <div class="dfs">自主：0</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="search-card">
          <div class="df aic">
            <img src="../assets/ProjectImages/index/icon_2.png" class="icon" alt="" />
            <div class="ml_20">
              <div>累计收费金额</div>
              <div class="mt_10 fs">100</div>
            </div>
          </div>
          <div class="">
            <div class="dfs">新生：0</div>
            <div class="dfs">老生：1</div>
            <div class="dfs">自主：0</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-divider content-position="left">收费项目统计</el-divider>
    <el-table :data="dataList" row-key="id" size="mini" stripe border class="mt_10">
      <el-table-column label="收费项目" prop="name" />
      <el-table-column label="今日缴费人数" prop="idNumber" />
      <el-table-column label="今日缴费金额" prop="collegeName" />
      <el-table-column label="累计缴费人数" prop="majorName" />
      <el-table-column label="累计缴费金额" prop="majorName" />
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      dataList: [],
    };
  },
  methods: {},
};
</script>
<style>
.df {
  display: flex;
}
.dfs {
  width: 50%;
  padding-top: 10px;
  display: inline-flex;
}
.aic {
  align-items: center;
}
.ml_20 {
  margin-left: 20px;
}
.mt_10 {
  margin-top: 10px;
}
.fs {
  font-size: 24px;
}
.icon {
  width: 60px;
  height: 60px;
}
</style>
